<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>添加用户</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
	<script src="${pageContext.request.contextPath}/js/jquery-2.1.0.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
	<style>
		.cus-container {
			width: 1368px;
		}
		#user-add .modal-content {
			padding: 0 20px 20px;
		}
		#user-edit .modal-content {
			padding: 0 20px 20px;
		}
		.username-error {
			color: red;
			display: none;
		}
	</style>
</head>
<body>
<!-- 引入公共头部 -->
<div class="container py-5">
	<div class="row justify-content-center">
		<div class="col-md-8 col-lg-6">
			<div class="register-card">
				<h2 class="text-center mb-4 text-primary">增加用户</h2>
				<form action="${pageContext.request.contextPath}/houtaiuser/zeng" method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
					<div class="mb-3">
						<label for="name" class="form-label">用户名</label>
						<input type="text" class="form-control" id="name" name="name" required>
						<div class="invalid-feedback">请输入用户名</div>
						<div class="username-error" id="username-error">用户名已存在</div>
					</div>
					<div class="mb-3">
						<label for="pass" class="form-label">密码</label>
						<input type="password" class="form-control" id="pass" name="pass" required>
						<div class="invalid-feedback">请输入密码</div>
					</div>
					<div class="form-group">
						<label for="phone">手机号：</label>
						<input type="text" class="form-control" id="phone" name="phone" pattern="[0-9]{11}" placeholder="请输入手机号" required>
					</div>
					<label for="tou">头像:</label>
					<input type="file" id="tou" name="image" accept="image/*"><br><br>
					<div class="d-grid gap-2">
						<button type="submit" class="btn btn-primary btn-lg">增加</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
<script>
	// 表单实时验证
	(() => {
		'use strict'
		const forms = document.querySelectorAll('.needs-validation')

		Array.from(forms).forEach(form => {
			form.addEventListener('submit', event => {
				if (!form.checkValidity()) {
					event.preventDefault()
					event.stopPropagation()
				}
				form.classList.add('was-validated')
			}, false)
		})
	})()
</script>
</body>
</html>
